<template>
  <div>
    <el-dialog
      :title="$t('m.EMPLOYEE_MANAGEMENTL')"
      :modal="false"
      :visible.sync="employeeDialog"
      center
      :close-on-click-modal="false"
      custom-class="distribution-dialog"
      :before-close="handleClose"
    >
      <el-container style="height:100%">
        <el-header style="height:10%">
          <!-- 搜索框 -->
          <el-autocomplete
            class="inline-input"
            v-model="searchKey"
            :fetch-suggestions="querySearch"
            :placeholder="$t('m.tip.PLEASE_ENTER_CONTENT')"
            :trigger-on-focus="false"
            @select="handleSelect"
            popper-class="default-select-popper"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-autocomplete>
        </el-header>
        <el-container style="height:90%;padding: 0 20px;">
          <el-aside class="aside-left">
            <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap">
              <el-tree
                :data="treeData"
                icon-class="el-icon-arrow-right"
                node-key="id"
                highlight-current
                @node-click="nodeClick"
                :default-expanded-keys="expandedTreeKey"
                ref="tree"
                :filter-node-method="groupFilter"
              ></el-tree>
            </el-scrollbar>
          </el-aside>
          <el-main>
            <el-table
              :data="tableData"
              cell-class-name="table-cell-custom"
              header-cell-class-name="table-herder-custom"
              highlight-current-row
              size="small"
              @current-change="dispatchCurrentRowChange"
              style="width: 100%"
              height="100%"
              ref="myTable"
            >
              <el-table-column width="55" type="selection" align="center"></el-table-column>
              <el-table-column :label="$t('m.REAL_NAME')" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.realName }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.SEX')" align="center">
                <template slot-scope="scope">
                  <span>{{ $t('m.dict.sex')[scope.row.sex] }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.DUTY')" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.dutyName[0] }}</span>
                </template>
              </el-table-column>
              <el-table-column width="100" :label="$t('m.DEFAULT_NO')" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.defaultNo }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.KEY_VALUE')" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.keyNumber }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <img
                    style="cursor: pointer;width:25px"
                    src="../../assets/images/Edit.png"
                    @click="handleModify(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <div style="float:right">
          <el-button @click="handleAdd" size="small">{{$t('m.ADD')}}</el-button>
          <el-button @click="handleDel" size="small">{{$t('m.DELECT')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 职员窗口 -->
    <employee-form
      v-if="openEmployeeForm"
      :title="$t('m.EMPLOYEE_MANAGEMENTL')"
      :open.sync="openEmployeeForm"
      :formData="formData"
      :editFlag="editFlag"
      @clearTableData="clearTableData"
    ></employee-form>
  </div>
</template>

<script>
import { dataflow } from '@/api/data'
import { mapGetters } from 'vuex'
import EmployeeForm from '../Gis/EmployeeForm'
export default {
  components: {
    EmployeeForm,
  },
  props: {
    employeeDialog: Boolean,
    source: Object,
  },
  data() {
    return {
      editFlag: true,
      title: '职员管理',
      tableData: [],
      telMap: new Map(),
      distributionRow: [],
      phoneNumber: '',
      currentGroup: {},
      openEmployeeForm: false,
      formData: {},
      searchKey: '',
      telOperatorArr: [],
      expandedTreeKey: [], //默认展开调度组节点key
    }
  },
  filters: {
    sexFilter(status) {
      const sexFilter = {
        0: '女',
        1: '男',
      }
      return sexFilter[status]
    },
  },
  computed: {
    ...mapGetters({
      deviceStatusMap: 'deviceStatusMap',
      treeData: 'userGroupTreeDataAll',
      telEmployeeMap: 'telEmployeeMap',
      operatorCallTels: 'operatorCallTels',
    }),
  },
  methods: {
    eventMore(e) {
      let _this = this
      console.log(e)
      switch (e.type) {
        case 'EmployeeDel':
          if (e.result == 'succ') {
            this.handleFresh()
          } else {
            this.$message.error('职员删除失败')
          }
          break
        case 'EmployeeAdd':
          if (e.result == 'succ') {
            this.handleFresh()
          } else {
            this.$message.error('职员添加失败')
          }
          break
        case 'EmployeeMod':
          if (e.result == 'succ') {
            this.handleFresh()
          } else {
            this.$message.error('职员修改失败')
          }
          break
        default:
          break
      }
    },
    //刷新页面
    handleFresh() {
      let _this = this
      this.tableData = []
      _this.$store.dispatch('initUser')
      this.$nextTick(() => {
        _this.$refs.tree.filter()
      })
    },
    clearTableData() {
      this.tableData = []
    },
    // 点击删除
    deleteRow(index) {
      this.$delete(this.distributionRow, index)
    },
    // 添加按钮
    handleAdd() {
      let currentGroup = this.currentGroup
      if (
        currentGroup == '' ||
        currentGroup == null ||
        JSON.stringify(currentGroup) == '{}'
      ) {
        return this.$message.warning('请先选择组')
      }
      this.openEmployeeForm = true
      this.formData = {
        group: [
          {
            groupID: currentGroup.groupID,
            groupName: currentGroup.groupName,
            orderNO: 1,
          },
        ],
        device: [],
      }
    },
    // 选中调度员
    dispatchCurrentRowChange(currentRow, oldCurrentRow) {},
    // 选中职员
    currentRowChange(currentRow, oldCurrentRow) {},
    // 点击树节点
    nodeClick(data, node, nodeC) {
      let _this = this
      this.currentGroup = data.obj
      SDK.getContactByGroup(data.obj.groupID, data.obj.groupType).then(
        (res) => {
          if (data.obj.groupType === 'dispatchgroup') {
            this.tableData = res.operator
          } else {
            let tableData = []
            const employeeList = res.employee
            this.tableData = employeeList
          }
        }
      )
      this.$nextTick(() => {
        _this.$refs.tree.filter()
      })
    },
    // 关闭弹出窗
    handleClose() {
      this.$emit('update:employeeDialog', false)
    },
    // 组过滤
    groupFilter(value, data, node) {
      return data.obj.groupType !== 'dispatchgroup'
    },
    //修改
    handleModify(item) {
      this.openEmployeeForm = true
      this.formData = { ...item }
    },
    //搜索框 下拉框数据
    querySearch(queryString, cb) {
      var restaurants = this.telOperatorArr
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      let arr = []
      results.forEach((element) => {
        arr.push({ value: element.realName, tel: element.defaultNo })
      })
      cb(arr)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.realName.includes(queryString)
      }
    },
    handleSelect(item) {
      console.log(item)
      let _this = this
      //找到所在组
      const employee = this.telEmployeeMap.get(item.tel)
      if (employee) {
        const id = employee.group[0].groupID
        this.$refs.tree.setCurrentKey(id)
        let node = this.$refs.tree.getNode(id)
        if (node) {
          this.nodeClick(node.data)
          this.expandedTreeKey.push(id)
          this.$nextTick(function () {
            setTimeout(() => {
              _this.$refs.tree.setCurrentKey(id)
              let aa = _this.tableData[1]
              for (let i = 0; i < _this.tableData.length; i++) {
                let obj = _this.tableData[i]
                if (employee.employeeID == obj.employeeID) {
                  _this.$refs.myTable.setCurrentRow(obj, true)
                  //滚动条位置】比例计算
                  _this.$refs.myTable.bodyWrapper.scrollTop =
                    _this.$refs.myTable.bodyWrapper.scrollHeight *
                    (i / _this.tableData.length)
                  break
                }
              }
            }, 300)
          })
        }
      }
    },
    //删除
    handleDel() {
      let _this = this
      let delArr = this.$refs.myTable.store.states.selection
      if (delArr.length == 0) {
        this.$message.warning(this.$t('m.tip.DEL_EMPTY_TIP'))
        return
      }
      this.$confirm(this.$t('m.tip.DELECT_TIP'), this.$t('m.tip.TIPS'), {
        confirmButtonText: this.$t('m.CONFIRM'),
        cancelButtonText: this.$t('m.CANCEL'),
        type: 'warning',
      }).then(() => {
        delArr.forEach((e) => {
          let obj = {
            request: {
              '@id': '100000',
              '@type': 'EmployeeDel',
              employeeID: e.employeeID,
            },
          }
          dataflow(obj).then((res) => {})
        })
      })
    },
    init() {
      this.telOperatorArr = []
      for (var item of this.telEmployeeMap.values()) {
        this.telOperatorArr.push(item)
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.tree.filter()
    })
    SDK.setEventMore(this.eventMore)
    this.init()
  },
}
</script>

<style lang="scss" scoped>
/deep/.distribution-dialog {
  width: 900px;
  height: 500px;
  background-color: #1a4969;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .el-dialog__close {
    color: #fff;
  }

  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 0;
    height: 446px;
    .inline-input {
      margin-bottom: 10px;
      width: 100%;
      .el-input__inner {
        background-color: #1a4969;
        color: #fff;
      }
      .el-autocomplete-suggestion li {
        color: white;
      }
    }
  }
  .el-dialog__footer {
    background-color: #1a4969;
    padding: 5px 30px;
    height: 45px;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  .default-scrollbar {
    width: 100%;
    height: calc(100% - 20px);
    background-color: #172a47;
  }

  .default-scrollbar__wrap {
    width: auto;
    overflow-x: hidden;
    margin-right: -20px !important;
  }

  .el-tree-node__content {
    height: 34px;
    cursor: default;

    &:hover {
      background-color: #172a47;
      border: 1px solid #d0cdcd;
      color: white;
    }
  }

  .el-tree-node.is-current > .el-tree-node__content {
    // background-color: #00b2ee;
    // #6BB5E6
    background-color: #6bb5e6;
    color: #000;
  }

  .el-container {
    height: 100%;

    .aside-left {
      width: 200px !important;
      height: 100%;

      .el-tree {
        background-color: #172a47;
        color: #fff;
      }
    }

    .el-main {
      height: 100%;
      padding-top: 0px;

      .el-table {
        background-color: #1a4969;
        height: 425px;

        td {
          border-bottom: 1px solid #2e67a8;
        }

        tr:hover > td {
          background-color: #2f6b8d;
        }

        .table-herder-custom {
          background-color: #2e67a8;
          color: #fff;
        }

        .table-cell-custom {
          background-color: #172a47;
          color: #fff;

          .el-link {
            color: #fff;
            margin-left: 20px;

            span {
              font-size: 10px;
            }

            &:hover {
              color: #06f7bb;
            }
          }
        }

        .el-table__body tr.current-row > td {
          background: #00b2ee !important;
        }
      }

      .el-table::before {
        height: 0;
      }
    }
  }

  .aside-right {
    height: 425px;
    margin-right: 10px;
    margin-bottom: 20px;
    border: 1px solid #00b2ee;
    border-radius: 5px;
    background-color: #172a47;
  }

  .right-scrollbar {
    width: 100%;
    height: calc(100% - 40px);
  }

  .right-scrollbar__wrap {
    width: auto;
    // height: 110%;
    overflow-x: hidden;
  }

  .input-text {
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;

    .el-input {
      margin-left: 3px;

      .el-input__inner {
        background-color: #172a47;
        color: #fff;
      }
    }

    .el-button {
      height: 28px;
      padding: 0 10px;
      margin: 0 2px;
    }
  }

  .distribution-item {
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin: 3px 2px;
    color: #fff;
    display: flex;

    div {
      width: 50%;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }
  }

  .distribution-item:hover {
    background-color: #a4cedb;
  }

  .distribution-commit {
    text-align: center;
    margin-top: 5px;

    .el-button {
      height: 30px;
      width: 80px;
      background-color: #172a47;
      color: #fff;
      padding: 0;
    }

    .el-button:hover {
      background-color: #409eff;
    }
  }

  @media screen and (max-width: 1024px) {
    width: 800px;
    height: 450px;

    .el-dialog__body {
      height: 400px;
    }

    .aside-left {
      width: 150px !important;
    }

    .el-main {
      padding-right: 5px;
      padding-left: 5px;
    }

    .el-table {
      height: 380px !important;
    }

    .el-tree-node__label {
      font-size: 12px;
    }

    .aside-right {
      height: 380px;
    }

    .distribution-item {
      font-size: 12px;
    }
  }
}
</style>
